import React, { useEffect, useState } from "react";
import "./Todolist.css";
import TodoHeader from "../../components/TodoHeader/TodoHeader";
import TodoMain from "../../components/TodoMain/TodoMain";
import TodoFooter from "../../components/TodoFooter/TodoFooter";
import { nanoid } from "nanoid"; //第三方插件  生成随机插件

export default function Todolist() {
  let [todo, setTodo] = useState([
    { id: 1, title: "吃饭", done: false },
    { id: 2, title: "睡觉", done: false },
    { id: 3, title: "打豆豆", done: false },
  ]);

  //  添加todo 数据的方法
  let addtodo = (title) => {
    setTodo([
      ...todo,
      {
        id: nanoid(),
        title: title,
        done: false,
      },
    ]);
  };

  //改变选中状态
  let updatatodo = (id) => {
    let newtodo = todo.filter((item) => {
      if (item.id === id) {
        item.done = !item.done;
      }
      return item;
    });
    setTodo(newtodo);
  };
  //删除对应id 的todo 数据
  let deltodo = (id) => {
    let newtodo = todo.filter((item) => item.id !== id);
    setTodo(newtodo);
  };
  // 全选  更改所有的任务 done
  let check = (done) => {
    let newtodo = todo.map((item) => {
      item.done = done;
      return item;
    });
    setTodo(newtodo);
  };

  let remove = () => {
    let newtodo = todo.filter((item) => item.done === false);
    setTodo(newtodo);
  };

  //  测试方法
  useEffect(() => {
    // addtodo("abc");
    // deltodo(1);
    // check();
  }, []);
  return (
    <>
      <div className="todo-container">
        <div className="todo-wrap">
          <TodoHeader addtodo={addtodo}></TodoHeader>
          <TodoMain
            todo={todo}
            updatatodo={updatatodo}
            deltodo={deltodo}
          ></TodoMain>
          <TodoFooter todo={todo} check={check} remove={remove}></TodoFooter>
        </div>
      </div>
    </>
  );
}
